<template>
  <div id="happy" style="height:300px"></div>
</template>

<script>
export default {
  data() {
    return {};
  },
  mounted: function() {
    // 实例化echarts，确保dom元素可操作
    this.getEchaData();
  },
  methods: {
    getEchaData() {
      var that = this;
      // 发送请求
      this.$http.get("reports/type/1").then(function(res) {
        let { data } = res;
        console.log(data);
        var obj = {
            legData:data.data.legend.data,
            xData:data.data.xAxis[0].data,
            serData:data.data.series
        }
        that.money(obj);
      });
      
    },
    money(obj) {
        console.log(obj)
      this.$echarts.init(document.getElementById("happy")).setOption({
        title: {
          text: "平均薪资"
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985"
            }
          }
        },
        legend: {
          data: obj.legData
        },

        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: obj.xData
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ],
        series: obj.serData
      });
    }
  }
};
</script>

<style>
</style>